<div class="workbench-fn">

  <div apes-row>

    <!--常用功能-->
    <div apes-col [apesSpan]="24" style="padding: 0">
      <apes-card [apesTitle]="'常用功能'" style="margin-bottom: 4px !important;">
        <div class="fnWorkbenchMenu">
          <div *ngFor="let menu of fnWorkbenchMenu"
               class="fnWorkbenchMenu-main"
               (click)="openContextLink(menu)">
            <div class="fnWorkbenchMenu-img">
              <img [src]="fnWorkbenchImg(menu)" alt="">
            </div>
            <div class="fnWorkbenchMenu-title">{{menu.name}}</div>
          </div>
        </div>
      </apes-card>

    </div>

    <!--门店数据-->
    <div apes-col [apesSpan]="personalData['DEPT_NAME']? 19 : 24" style="padding: 0">
      <apes-card [apesTitle]="storeDataTemplate" style="margin-bottom: 4px !important;">
        <ng-template #storeDataTemplate>
          <div>
            门店数据 <span>今日数据实时统计</span>
          </div>
        </ng-template>
        <!--        <div>{{storeData | json}}</div>-->

        <div class="workbench-storeData">

          <div class="workbench-storeData-main">
            <div class="workbench-storeData-num">
              {{storeData['SALE_MONEY']}}
              <i apes-tooltip class="workbench-storeData-tooltip"
                 [apesTooltipTrigger]="'hover'"
                 [apesTooltipTitle]="saleMoneyTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #saleMoneyTemplate>
                <div>门店所收到所有实收金额</div>
              </ng-template>
            </div>
            <div class="workbench-storeData-text">营业额</div>
          </div>
          <div class="workbench-storeData-main" *ngIf="storeData.hasOwnProperty('COST')">
            <div class="workbench-storeData-num">
              {{storeData['COST']}}
              <i apes-tooltip class="workbench-storeData-tooltip"
                 [apesTooltipTrigger]="'hover'"
                 [apesTooltipTitle]="costTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #costTemplate>
                <div>生产经营必须耗费—定的资源，其所费资源的货币表现及其对象化称之为成本（成本额=配件成本＋工时成本＋耗材领用＋平台服务费＋供应链管理费)</div>
              </ng-template>
            </div>
            <div class="workbench-storeData-text">成本额</div>
          </div>
          <div class="workbench-storeData-main" *ngIf="storeData.hasOwnProperty('PROFIT')">
            <div class="workbench-storeData-num">
              {{storeData['PROFIT']}}
              <i apes-tooltip class="workbench-storeData-tooltip"
                 [apesTooltipTrigger]="'hover'"
                 [apesTooltipTitle]="profitTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #profitTemplate>
                <div>毛利 = 营业额 - 成本 + 联盟收益，反映了门店的整体收益状况。</div>
              </ng-template>
            </div>
            <div class="workbench-storeData-text">毛利额</div>
          </div>
          <div class="workbench-storeData-main">
            <div class="workbench-storeData-num">
              {{storeData['TIMES']}}
              <i apes-tooltip class="workbench-storeData-tooltip"
                 [apesTooltipTrigger]="'hover'"
                 [apesTooltipTitle]="timeTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #timeTemplate>
                <div>接车台次为进店接车的接车数量(相同车牌去重)</div>
              </ng-template>
            </div>
            <div class="workbench-storeData-text">进店台次</div>
          </div>
          <div class="workbench-storeData-main">
            <div class="workbench-storeData-num">{{storeData['NEW_CLIENT']}}</div>
            <div class="workbench-storeData-text">新增客户</div>
          </div>
          <div class="workbench-storeData-main">
            <div class="workbench-storeData-num">{{storeData['YEARCARD']}}</div>
            <div class="workbench-storeData-text">年卡金额</div>
          </div>

        </div>

      </apes-card>
    </div>

    <!--个人数据-->
    <div *ngIf="personalData['DEPT_NAME']" apes-col [apesSpan]="5" style="padding: 0">
      <apes-card [apesTitle]="'个人数据'" [apesExtra]="personalTemplate" style="margin-bottom: 4px !important;">
        <!--        <div>{{personalData | json}}</div>-->

        <ng-template #personalTemplate>
          <div *ngIf="personalData['CZPM'] != ''" class="personalData-header-extra">
            <div class="personalData-header-extra-text">{{personalData['CZPM']}}</div>
          </div>
        </ng-template>

        <div class="workbench-personalData">
          <div class="personalData-header">
            <div class="personalData-header-img">
              <!--              <i apes-icon apesType="user"></i>-->
              <ng-container *ngIf="personalData['SEX'] == '男'">
                <img src="./assets/tmp/img/home/male-icon.png" alt="">
              </ng-container>
              <ng-container *ngIf="personalData['SEX'] == '女'">
                <img src="./assets/tmp/img/home/female-icon.png" alt="">
              </ng-container>
              <ng-container *ngIf="personalData['SEX'] == 0">
                <i apes-icon apesType="user"></i>
              </ng-container>
            </div>
            <div class="personalData-header-name">{{userInfo['name']}}</div>
            <div class="personalData-header-deptName">{{personalData['DEPT_NAME']}}</div>
          </div>
          <div class="personalData-info">
            <div class="personalData-info-main" (click)="checkPersonalData()">
              <div class="personalData-info-num">{{personalData['CZ']}}</div>
              <div class="personalData-info-text">服务业绩</div>
            </div>
            <div class="personalData-info-main" (click)="checkPersonalData()">
              <div class="personalData-info-num">{{personalData['TC']}}</div>
              <div class="personalData-info-text">提成</div>
            </div>
          </div>
        </div>

      </apes-card>
    </div>

    <!--智能店助-->
    <div apes-col [apesSpan]="19" style="padding: 0">
      <apes-card [apesTitle]="intelligentDataTemplate">
        <ng-template #intelligentDataTemplate>
          <div>
            智能店助
            <span>约10分钟更新一次，可点击“<b (click)="refreshHomeData()">刷新</b>”查看</span>
          </div>
        </ng-template>

        <!--        <div>{{intelligentData | json}}</div>-->

        <div class="workbench-intelligentData">
          <apes-spin [apesSpinning]="intelligentLoading" [apesTip]="'正在刷新数据...'">

            <ng-container *ngIf="!intelligentLoading && intelligentData.length != 0">
              <apes-timeline>
                <ng-container *ngFor="let intelligent of intelligentData">
                  <apes-timeline-item>
                    <div class="workbench-intelligentData-title">{{intelligent.name}}</div>

                    <div class="workbench-intelligentData-main"
                         *ngFor="let main of intelligent.items">

                      <div class="intelligentData-title">{{main.name}}</div>
                      <div class="intelligentData-main">

                        <ng-container *ngFor="let box of main.items;">
                          <div class="intelligentData-box"
                               [ngStyle]="{width:checkBoxCol(main,box)}">
                            <div class="intelligentData-box-title">{{box.name}}</div>
                            <div apes-row
                                 class="intelligentData-box-detail">
                              <ng-container *ngFor="let data of box.data;">
                                <div class="box-detail-main"
                                     apes-col
                                     apes-tooltip
                                     [apesTooltipTitle]="detailMainTemplate"
                                     [apesSpan]="checkBoxMainCol(box,data)"
                                     (click)="checkAssistant(data)">
                                  {{data.NAME}}
                                  <span class="box-detail-main-total"
                                        [ngClass]="{'check': data['COLOR'] == 'orange'}">{{data.COUNT}}</span>
                                  <ng-template #detailMainTemplate>
                                    <div>{{data.NAME}} {{data.COUNT}}</div>
                                  </ng-template>
                                </div>
                              </ng-container>
                            </div>
                          </div>
                        </ng-container>

                      </div>

                    </div>
                  </apes-timeline-item>
                </ng-container>
              </apes-timeline>
            </ng-container>

            <ng-container *ngIf="!intelligentLoading && intelligentData.length == 0">
              <div style="text-align: center;">
                <apes-empty></apes-empty>
              </div>
            </ng-container>
          </apes-spin>
        </div>

      </apes-card>
    </div>

    <!--待办-->
    <div apes-col [apesSpan]="5" style="padding: 0">

      <apes-card [apesTitle]="'待办'" [apesExtra]="backlogDataTemplate">

        <ng-template #backlogDataTemplate>
          <div class="workbench-backlogData-extra">
            <div class="backlogData-extra-main"
                 apes-popover
                 apesPopoverTrigger="click"
                 apesPopoverPlacement="bottomRight"
                 (click)="checkShowItemType()"
                 [apesPopoverContent]="extraTemplate">待办数量（{{getCount()}}）
            </div>
          </div>
        </ng-template>

        <ng-template #extraTemplate>
          <div class="backlogData-extra-popover">
            <div class="extra-popover-check-main">
              <div class="extra-popover-check"
                   (click)="selectShowALlItemType(true)">全选
              </div>
              <div class="extra-popover-check"
                   (click)="selectShowALlItemType(false)">清空
              </div>
            </div>

            <div class="extra-popover-search">
              <apes-input-group [apesPrefix]="backlogDataSearch" [apesSuffix]="backlogDataClear">
                <input apes-input
                       placeholder="可输入相关单据名称"
                       type="search"
                       (keyup)="searchReceiptKeywords($event)"
                       [(ngModel)]="searchReceiptValue"
                       class="todo-condition-search-input">
              </apes-input-group>
              <ng-template #backlogDataSearch>
                <img [src]="'./assets/tmp/img/fn/search.png'"/>
              </ng-template>
              <ng-template #backlogDataClear>
                <i apes-icon apesType="close-circle" *ngIf="searchReceiptValue != null && searchReceiptValue != ''"
                   (click)="clearReceiptValue()"></i>
              </ng-template>
            </div>

            <div class="extra-popover-list-main">
              <div *ngFor="let item of popoverItem;let i = index;"
                   class="extra-popover-list">
                <label apes-checkbox
                       [(ngModel)]="item.checked"
                       (ngModelChange)="changShowItemType(item)">
                  <span style="position: relative;top: 3px;">{{item.name}}</span>
                </label>
              </div>
            </div>
          </div>
        </ng-template>

        <div class="workbench-backlogData-search">
          <apes-input-group [apesPrefix]="prefixIconSearch" [apesSuffix]="suffixIconClear">
            <input apes-input
                   placeholder="可输入相关单号/车牌/备注搜索"
                   type="search"
                   (keyup)="searchKeywords($event)"
                   [(ngModel)]="searchValue"
                   class="todo-condition-search-input">
          </apes-input-group>
          <ng-template #prefixIconSearch>
            <img [src]="'./assets/tmp/img/fn/search.png'"/>
          </ng-template>
          <ng-template #suffixIconClear>
            <i apes-icon apesType="close-circle" *ngIf="searchValue != null && searchValue != ''"
               (click)="showToDoListData()"></i>
          </ng-template>
        </div>

        <div class="workbench-backlogData">

          <apes-spin [apesSpinning]="showDataLoading" [apesTip]="'正在刷新数据...'">
            <ng-container *ngIf="showData.length != 0">
              <ng-container *ngFor="let data of showData; let i = index;">
                <div class="workbench-backlogData-main" (click)="selectData(data)">

                  <!--              {{data  | json}}-->

                  <div class="backlogData-title">
                    <div class="backlogData-title-text">{{data.itemType}}</div>
                    <div class="backlogData-title-tip"
                         [ngClass]="showProcessClass(data.processType)">{{data.processType}}</div>
                  </div>
                  <div class="backlogData-todoNode">{{data.todoNode}}</div>
                  <div class="backlogData-businessKey">单号:<span>{{data.businessKey}}</span></div>
                  <div *ngIf="data.carLicense">车牌:{{data.carLicense}}</div>
                  <div class="backlogData-remark">
                    <div *ngFor="let remark of data.contentData">{{remark}}</div>
                  </div>
                </div>
              </ng-container>
            </ng-container>

            <ng-container *ngIf="showData.length == 0">
              <div style="text-align: center;">
                <apes-empty></apes-empty>
              </div>
            </ng-container>
          </apes-spin>
        </div>
      </apes-card>

    </div>


  </div>

</div>
